import React from "react";
import Chart from "echarts-for-react";
import echarts from 'echarts';
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';


class BladDayHourEcharts extends React.Component {

    constructor(props) {
        super(props)
        this.state={
            disList:{}
        }

    }

    componentDidMount () {
        console.log(PublicService.getCookie("gasStationName")) 
        let data = {
            gasStationName:PublicService.getCookie("gasStationName"),
            type:2
        }
        request({
            url: `/zhrq-web/gas/gasMonitor/getRunTimeTu`,
            method: 'POST',
            data:data
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                this.setState({
                    disList:data.ret
                })
            }
        })
       
    }
    
   
    
    setOption  = () => {
        let data = this.state.disList;
        return {color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        dataZoom: [{
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'filter',
            start: 0,
            end: 100

        }
            // , {
            //     type: 'slider',
            //     yAxisIndex: 0,
            //     filterMode: 'empty',
            //     start: 0,
            //     end: 100
            // }
            , {
            type: 'inside',
            xAxisIndex: 0,
            filterMode: 'filter',
            start: 0,
            end: 100

        }, {
            type: 'inside',
            yAxisIndex: 0,
            filterMode: 'filter',
            start: 0,
            end: 100

        }],
        xAxis : [
            {
                type : 'category',
                data : data.xAxisData,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                // type : 'category',
                // data : ['10','20','30','40'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        series : [
            {
                name:'甲烷小时均值',
                type:'bar',
                barWidth: '40%',
                data:data.seriesData
            },
            
        ],
        label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}'
                }
            },
        itemStyle: {
                    normal: {
                     
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(17, 168,171, 1)'
                        }, {
                            offset: 1,
                            color: 'rgba(17, 168,171, 0.1)'
                        }]),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10
                    }
                }
        };

        

    }

    render() {
      
        return (

                 <Chart option={this.setOption()} notMerge lazyUpdate style={{height:"70vh"}}
                 echartsInstance={this.save}
                 />
          

         
           
          );
    }
   
}

export default BladDayHourEcharts;
